<template>
  <div class="pagination" style="text-align: right">
    <el-pagination
      :small="small"
      class="text-center"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.page_index"
      :page-sizes="pageSizes"
      :page-size="page.page_limit"
      layout="sizes, total, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
  export default {
    name: 'Pagination',
    props: {
      total: {
        type: Number
      }, // 总条数
      page: {
        type: Object,
        default: () => ({
          page_index: 1,
          page_limit: 10
        })
      },
      small: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        pageSizes: [10, 20, 50, 100, 200]
      }
    },
    methods: {
      // // 每页查看条数变化
      handleSizeChange(val) {
        this.page.page_limit = val
        this.page.page_index = 1
        this.$emit('pageChange', this.page)
      },
      // 当前页码变化
      handleCurrentChange(val) {
        this.page.page_index = val
        this.$emit('pageChange', this.page)
      }
    }
  }
</script>

<style scoped>
  .pagination {
    padding: 15px 0;
  }
</style>
